<template>
  <div class="main-container">
    <MainLayout>
      <template #header>
        <SearchTool
          @handleAdd="
            ({ callType, isEdit }) => {
              addEditReactive.handleAdd(callType, isEdit);
            }
          "
          @handle-export="handleExport"
          @handle-search="handleSearch"
        />
      </template>
      <template #default>
        <el-table :data="tableData" height="100%" border>
          <el-table-column prop="businessNo" label="业务流水号" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ scope.row.businessNo || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="callName" label="Call车名称" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ scope.row.callName || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="callNum" label="Call车数量" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ scope.row.callNum || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="rebate" label="Call车费用" show-overflow-tooltip min-width="120px">
            <template #default="scope">
              {{ splitThousandSeparator(scope.row.rebate) }}
            </template>
          </el-table-column>
          <el-table-column prop="bond" label="Call车保证金" show-overflow-tooltip min-width="110px">
            <template #default="scope">
              {{ splitThousandSeparator(scope.row.bond) }}
            </template>
          </el-table-column>
          <el-table-column prop="callEndMoney" label="Call车尾款" show-overflow-tooltip min-width="110px">
            <template #default="scope">
              {{ splitThousandSeparator(scope.row.callEndMoney) }}
            </template>
          </el-table-column>
          <el-table-column prop="callTypeName" label="Call车类型" show-overflow-tooltip min-width="110px">
            <template #default="scope">
              {{ scope.row.callTypeName || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="说明" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.remark || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="callTime" label="Call车日期" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ scope.row.callTime || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="updateUname" label="操作人" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.updateUname || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="statusName" label="Call车状态" min-width="100px">
            <template #default="scope">
              <span :class="['circle', scope.row.status == 1 ? 'circle-green' : 'circle-red']">{{
                scope.row.statusName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="isOperateShow" prop="" fixed="right" label="操作" width="170px">
            <template #default="scope">
              <ElButton
                v-if="btnList?.includes(35)"
                link
                type="primary"
                @click="addEditReactive.handleDetails(scope.row)"
                >详情</ElButton
              >
              <!-- <ElButton
                v-if="btnList?.includes(36)"
                link
                type="primary"
                @click="addEditReactive.handleAdd(scope.row.callType, true, scope.row)"
                >编辑</ElButton
              > -->
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <el-pagination
          v-model:currentPage="page.pageNum"
          v-model:page-size="page.pageSize"
          :page-sizes="page.pageSizes"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="page.handleSizeChange"
          @current-change="page.handleCurrentChange"
        />
      </template>
    </MainLayout>
    <AddEditDialog
      ref="AddEdit"
      :is-edit="addEditReactive.isEdit"
      :call-type="addEditReactive.callType"
      @handleRefresh="getTableData(1)"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import MainLayout from '@/components/MainLayout/index.vue';
import AddEditDialog from './AddEditDialog.vue';
import SearchTool from './SearchTool.vue';
import usePageData from '@/hooks/usePageData';
import { getCallDetailApi, orderCallPageListApi, exportCallFileApi } from '@/api/account_manage';
import { exportFileUtil, splitThousandSeparator } from '@/utils/';
import useBtnAuth from '@/hooks/useBtnAuth';

const router = useRouter();
// 权限
const { btnList, isOperateShow } = useBtnAuth([35, 36]);

// 列表
const { tableData, page, getTableData } = usePageData(orderCallPageListApi);

// 导出
const handleExport = async () => {
  try {
    const res = await exportCallFileApi(page.searchForm);
    if (res) {
      exportFileUtil(res);
    }
  } catch (e) {
    console.error(e);
  }
};

// 查询
const handleSearch = (search: any) => {
  page.searchForm = { ...search };
  getTableData(1);
};

// 增改
const AddEdit = ref<any>();
type AddEditReactive = {
  callType: string | number;
  isEdit: boolean;
  handleAdd(callType: AddEditReactive['callType'], isEdit: AddEditReactive['isEdit'], row?: any): void;
  handleRowDetails(id: string | number): void;
  handleDetails(row: any): void;
};
const addEditReactive = reactive<AddEditReactive>({
  callType: '', // 1.库融call车 2.返利call车 3.现金call车
  isEdit: true,
  handleAdd(callType, isEdit, row) {
    addEditReactive.callType = callType;
    addEditReactive.isEdit = isEdit;
    if (row) {
      addEditReactive.handleRowDetails(row.id);
    } else {
      AddEdit.value.handleOpen(row);
    }
  },
  handleRowDetails: async (id) => {
    try {
      const res = await getCallDetailApi(id);
      const { code, data } = res;
      if (code === 10000 && data) {
        AddEdit.value.handleOpen(data);
      }
    } catch (e) {
      console.error(e);
    }
  },
  async handleDetails(row) {
    try {
      await router.push({ name: 'bill_list_details', query: { id: row.id } });
    } catch (error) {
      router.push({ name: 'not-found' });
    }
  },
});
</script>

<style scoped lang="scss">
.bill-list-top {
  height: 40px;
  display: flex;
  justify-content: end;
  align-items: center;
}
</style>
